<template>
	<view class="content">
		<view class="wrap">
			<view class="text-wrap">
				<text class="name">{{data.name}}</text><br/>
			</view>
			<view class="text-wrap"  v-if="data.onSale" style="margin-left: 10upx;padding-top:4upx;width: 70upx">
				<text class="status">在售</text>
			</view>
		</view>
		<view style="padding: 0 30upx">
			<view class="label" v-for="item in data.tags">
				{{item}}
			</view>
		</view>
		<view class="img-warp" v-if="data.albums.length"  @click="goAlbum">
			<image mode="scaleToFill"  :style="{width: (width-20)*0.7+'px',height:(width-20)*0.7*175/253+'px'}"
				   :src="data.albums[0].pictures[0]"></image>
			<view :style="{marginLeft:'2px',padding:0,width: (width-20)*0.7*109/253+'px'}">
				<view style="width: 100%;height: calc(50% - 1px)">
					<image v-if="data.albums[0].pictures[1]||data.albums[1].pictures[0]"
						   mode="scaleToFill" :style="{width: '100%',height:'100%'}" :src="data.albums[0].pictures[1]||data.albums[1].pictures[0]"></image>
				</view>
				<view class="ssss" :style="{background:data.imgNum>3?' #575757':'',opacity:data.imgNum>3?0.6:1}" v-if="data.albums[0].pictures[2]||
				(data.albums[0].pictures.length==2?data.albums[1].pictures[0]:data.albums[1].pictures[2])||data.albums[2].pictures[0]">
					<view style="width: 100%;height: 100%">
						<image mode="scaleToFill" style="width: 100%;height: 100%" :src="data.albums[0].pictures[2]||
				(data.albums[0].pictures.length==2?data.albums[1].pictures[0]:data.albums[1].pictures[2])||data.albums[2].pictures[0]"></image>
						<view style="margin-top: -70%" v-if="data.imgNum>3">{{data.imgNum}}+ <br/>
						<span style="font-size: 26upx">查看更多</span>
					</view>
					</view>
				</view>
			</view>
		</view>
<!--		<view  :style="{width: (width-20)*0.7*109/253+'px',-->
<!--		top:(width-20)*0.7*175/253-(width-20)*0.7*109/253*86/109+83+'px',height:(width-20)*0.7*109/253*86/109+'px'}" class="more"></view>-->
		<view class="content-wrap">
			<view class="title">参考价格（均价/总价）</view>
			<view class="title">建面</view>
			<view class="value">{{data.price}}<span style="font-size: 24upx;padding:0 10upx"> 元 </span>
				<span style="padding-right:10upx"> / </span>{{data.totalPrice}}
				<span style="font-size: 24upx;padding:0 10upx"> 万 </span></view>
			<view class="value">{{data.area}}<span style="padding:0 10upx">㎡</span></view>
			<view class="lable">类型：<span style="color: #0e1e3b">{{data.type}}</span></view>
			<view class="lable">户型：<span style="color: #0e1e3b">{{data.houseTypeText}}</span></view>
			<view class="lable">结构：<span style="color: #0e1e3b">{{data.structure}}</span></view>
			<view class="lable">开盘：<span style="color: #0e1e3b">{{data.openTime}}</span></view>
			<view class="lable" style="width: 100%">开发商：<span style="color: #0e1e3b">{{data.manager.name}}</span></view>
			<view class="lable" style="width: calc(100% - 200upx)">楼盘地址：
				<span style="color: #0e1e3b">{{data.address}}</span></view>
			<view class="lable" style="width: 200upx;text-align: right" @click="goMap(1)">{{data.distance}}km
				<text class="iconfont" style="font-size:30upx;color: rgba(155, 155, 155, 1);">&#xe60e;</text>
			</view>
			<view class="lable" style="width: calc(100% - 200upx)">售楼处地址：
				<span style="color: #0e1e3b">{{data.saleAddress}}</span></view>
			<view class="lable" style="width: 200upx;text-align: right" @click="goMap(0)">{{data.saleDistance}}km
				<text class="iconfont" style="font-size:30upx;color: rgba(155, 155, 155, 1);">&#xe60e;</text>
			</view>
			<view class="lable" style="width:100%">产权年限：<span style="color: #0e1e3b">{{data.rightYear}}年</span></view>
			<view class="lable" style="width: 100%">装修标准：<span style="color: #0e1e3b">{{data.decorationStandard}}</span></view>
			<view class="lable" style="width:100%">物业费：<span style="color: #0e1e3b">{{data.propertyCost}}元/㎡/月</span></view>
			<view class="lable" style="width:100%">物业公司：<span style="color: #0e1e3b">{{data.propertyCompany}}</span></view>
			<view  style="width:100%;color:#9399a5;font-size: 30upx;line-height: 64upx;">楼盘简介：
				<span style="color: #0e1e3b">{{data.description}}</span></view>

		</view>
		<view style="background:#F4F4F4;height: 20upx;margin-bottom: 20upx" v-if="activitys.length"/>
		<view class="album-name" v-if="activitys.length">活动信息</view>
		<scroll-view scroll-x="true" class="album-wrap" style="padding: 40upx 0 240upx 0">
			<image v-for="item in activitys" :style="{marginLeft:'30rpx',width:width*0.7+'px',borderRadius:'20rpx',height:width*0.28+'px',display: 'inline-block'}"
				   @click="goActivityDetails(item.id)" :src="item.cover"></image>
		</scroll-view>
		<view class="footer">
			<button style="background: white;height:100upx;width: 30%;text-align: center"
					open-type="share" @click="share">
				<text class="iconfont"
					  style="position:relative;top:-50upx;font-size:60upx;color: #101010">&#xe6a4;</text>
				<view style="position:relative;top:-110upx;color: rgba(16, 16, 16, 1);font-size: 26upx">分享</view>
			</button>
			<button type="primary" style="margin-bottom: 20upx" @click="call">
				电话咨询
			</button>
			<button type="primary" style="margin-bottom: 20upx;background: #4170EE" @click="changePopup">
				预约看房
			</button>
			<view class="safety"/>
		</view>
		<uni-popup :show="popupVisible" mode="fixed" position="bottom"   type="bottom"
				   style="width: 100%"
				   msg="填写预约信息" @hidePopup="hidePopup">
			<view style="padding-bottom:constant(safe-area-inset-bottom);
		padding-bottom:env(safe-area-inset-bottom);">
				<view class="popup-msg">提交预约申请后，置业顾问会第一时间联系您</view>
				<view class="close">
						<text @click="changePopup" class="iconfont"
							  style="padding:0 20upx;font-size:40upx;color: rgba(155, 155, 155, 1);line-height: 50px">
							&#xe603;</text>
				</view>
				<view class="popup-wrap">
					<view class="popup-title">您的姓名</view>
					<input v-model="name"  maxlength="10"/>
				</view>
				<view class="popup-wrap">
					<view class="popup-title" >您的性别</view>
					<view style="padding-top: 10upx;display: flex">
						<view class="sex-item" @click="changeItem(1)"
							  :style="{background:item==1?'#323C48':'#E8E8E8',color:item==1?'white':''}">先生</view>
						<view class="sex-item" @click="changeItem(0)"
							  :style="{background:item==0?'#323C48':'#E8E8E8',color:item==0?'white':''}">女士</view>
					</view>
				</view>
				<view class="popup-wrap">
					<view class="popup-title" style="width: 120upx">您的手机号</view>
					<input v-model="mobile" maxlength="11"/>
				</view>
				<button type="primary" style="height:100upx;
				line-height: 100upx;
				margin:40upx 20upx 20upx 20upx;width:calc(100% - 40upx);
				background: #4170EE" :loading="loading" @click="onSubmit">提交预约</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {uniPopup} from "@/components/uni-popup/uni-popup.vue"
	import API from '../../common/api.js';
	import UTIL from '../../common/util.js';

	export default {
		components: {
			uniPopup
		},
		data() {
			return {
				id:0,
				width: uni.getSystemInfoSync().windowWidth,
				name:'',
				mobile:'',
				popupVisible:false,
				item:-1,
				data:{},
				activitys:[],
				loading:false,
			}
		},
		onLoad(option) {
			this.id=option.id
			this.getData()
		},
		onPullDownRefresh(){
			this.getData(true)
		},
		methods: {
			goMap(num){
				uni.openLocation({latitude:num?this.data.latitude:this.data.saleLatitude,
					longitude:num?this.data.longitude:this.data.saleLongitude,name:num?this.data.address:this.data.saleAddress})
			},
			share(res) {

			},
			call(){
				uni.makePhoneCall({
					phoneNumber: this.data.manager.contactMobile
				});
			},
			async getData(flag){
				uni.showLoading()
				let json = await API.buildingDetail({
					"targetId": this.id,
					token:'token'
				});
				if(json.status==200){
					this.data=json.data
					this.data.imgNum=0
					this.data.albums.map(r=>{
						this.data.imgNum+=r.pictures.length
					})
					this.data.openTime=new Date(this.data.openTime * 1000).format('yyyy-MM-dd')
					let location=JSON.parse(uni.getStorageSync('location'));
					if(location){
						this.data.distance=UTIL.distance(location,this.data.latitude,this.data.longitude)
						this.data.saleDistance=UTIL.distance(location,this.data.saleLatitude,this.data.saleLongitude)
					}
				}else{
					if(flag){
						uni.showModal({
							title: '提示',
							content:'加载失败，请下拉刷新重试',
							showCancel: false,
						});

					}
				}
				let jsons = await API.buildPromotionList({
					buildingId:this.id,
					checkStatus:'success',
					limit: 100000,
					page: 0,
					enable:1
				});
				if(jsons.status==200){
					this.activitys=jsons.data

				}else{
					if(flag){
						uni.showModal({
							title: '提示',
							content:'加载失败，请下拉刷新重试',
							showCancel: false,
						});
					}
				}
				uni.stopPullDownRefresh()
				uni.hideLoading()
			},
			showImg(){
				uni.previewImage({
					current: 'http://pic.sc.chinaz.com/Files/pic/pic9/201906/bpic12300_s.jpg', // 当前显示图片的http链接
					urls: ['http://pic.sc.chinaz.com/Files/pic/pic9/201906/bpic12300_s.jpg','http://pic.sc.chinaz.com/Files/pic/pic9/201906/bpic12259_s.jpg'] // 需要预览的图片http链接列表

				})
			},
			goActivityDetails(id){
				uni.navigateTo({
					url: '../subscribe/activityDetails?id='+id
				});
			},
			hidePopup(){

			},
			async changePopup(){
				if(this.popupVisible){
					this.popupVisible=false
					return
				}
				if(!uni.getStorageSync('token')){
					uni.navigateTo({
						url: '../index/accredit'
					});
				}else{
					let json=await API.buildingPreordainCheck({targetId:this.id,token:uni.getStorageSync('token')})
					if(json.status==200){
						if(!json.data){
							this.popupVisible=true
						}else{
							uni.showModal({
								title: '提示',
								content:'已成功预约，无需再预约',
								showCancel: false,
							});
						}
					}else{
						uni.showModal({
							title: '提示',
							content:json.message,
							showCancel: false,
						});
					}
				}

			},
			changeItem(num){
				this.item=num
			},
			goAlbum(){
				uni.navigateTo({
					url: '../subscribe/album?data='+JSON.stringify(this.data.albums)
				});
			},
			async onSubmit(){
				if(!this.name){
					uni.showModal({
						title: '提示',
						content: '请输入您的姓名',
						showCancel: false,
					});
					return
				}
				if(!this.mobile){
					uni.showModal({
						title: '提示',
						content: '请输入您的手机号',
						showCancel: false,
					});
					return;
				}
				if(!(/^1[3456789]\d{9}$/.test(this.mobile))){
					uni.showModal({
						title: '提示',
						content: '请输入正确的手机号',
						showCancel: false,
					});
					return;
				}
				if(this.item<0){
					uni.showModal({
						title: '提示',
						content: '请选择您的性别',
						showCancel: false,
					});
					return;
				}
				this.loading=true
				uni.showLoading()
				let jsons = await API.buildingPreordain({
					buildingId:this.id,
					gender: this.item?'male':'female',
					mobile:this.mobile,
					name:this.name,
					token:uni.getStorageSync('token')
				});
				if(jsons.status==200){
					uni.showToast();
					this.popupVisible=false

				}else{
					if(flag){
						uni.showModal({
							title: '提示',
							content: jsons.message,
							showCancel: false,
						});
					}
				}
				this.loading=false
				uni.hideLoading()

			}
		}
	}
</script>

<style scoped>
	button:after {
		border-width: 0;
	}
	.content {
	}
	.wrap{
		padding:40upx 30upx 0upx 30upx;
		display: flex;
	}
	.img-warp{
		display: flex;
		padding:20upx 30upx;
	}
	.img{
		width: 100%;
		height: 100%;
		border-radius: 200upx;
	}
	.text-wrap{
		max-width:calc(100% - 70upx);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.name{
		color: rgba(0, 0, 0, 1);
		font-size: 40upx;
		font-family: PingFangSC-regular;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.status{
		line-height: 40upx;
		border-radius: 4upx;
		background-color: #538dd5;
		text-align: center;
		color: rgba(255, 255, 255, 1);
		font-size: 22upx;
		padding: 0 10upx;
		font-family: PingFangSC-regular;
	}
	.label{
		color: rgba(168, 168, 168, 1);
		font-size: 22upx;
		margin-top: 6upx;
		font-family: PingFangSC-regular;
		line-height: 30upx;
		border-radius: 4upx;
		text-align: center;
		padding: 0 10upx;
		display: inline-block;
		margin-right: 10upx;
		border: 1px solid rgba(213, 213, 213, 1);
	}
	.address-wrap{
		display: flex;
		padding:20upx 20upx 0 20upx;
	}
	.content-wrap{
		display: flex;
		flex-wrap: wrap;
		padding:20upx 30upx 40upx 30upx;
	}
	.title{
		color: rgba(155, 155, 155, 1);
		font-size: 28upx;
		width: 50%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.value{
		color:#f95640;
		font-size: 32upx;
		line-height: 60upx;
		width: 50%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-bottom: 20upx;
	}
	.lable{
		color:#9399a5;
		font-size: 30upx;
		line-height: 64upx;
		width: 50%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.remark{
		color: rgba(155, 155, 155, 1);
		font-size: 28upx;
		line-height: 40upx;
		padding-left: 20upx;
	}
	.save{
		width: calc(100% - 40upx);
		margin:60upx 0 0 20upx;
		height: 110upx;
		border-radius: 12upx;
		padding-top: 16upx;
		box-shadow: 0px 0px 11px 0px rgba(213, 213, 213, 1);
	}
	.more{
		background: #575757;
		position: absolute;
		top:166upx;
		right: 20upx;
	}
	.album-wrap{
		/*display: flex;*/
		/*min-width: 100%;*/
		/*overflow-x: auto;*/
		/*white-space: nowrap;*/
		/*display: flex;*/
		width: 100%;
		white-space: nowrap;
	}
	.album-name{
		padding-left: 30upx;
		color: rgba(0, 0, 0, 1);
		font-size: 36upx;
		font-family: PingFangSC-regular;
	}
	.footer{
		width: 94%;
		/*height: 116upx;*/
		position: fixed;
		bottom:  0px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		box-shadow: 0px 0px 8px 4px rgba(240, 240, 240, 1);
		background: white;
		color: rgba(79, 79, 79, 1);
		font-size: 24upx;
		font-family: PingFangSC-regular;
		padding: 30upx 3% 0 3%;
	}
	.safety{
		width:100%;
		height: constant(safe-area-inset-bottom);
		height:env(safe-area-inset-bottom);
	}
	.popup-wrap{
		border-radius: 8upx;
		height: 86upx;
		width: calc(100% - 60upx);
		margin-left: 20upx;
		padding-left: 20upx;
		text-align: left;
		padding-bottom: 10upx;
		margin-bottom: 40upx;
		border: 1px solid rgba(187, 187, 187, 1);
	}
	.popup-title{
		padding: 0 20upx;
		background: white;
		line-height: 40upx;
		margin-top: -20upx;
		width: 100upx;
		color: rgba(50, 60, 72, 1);
		font-size: 24upx;
		text-align: left;
		text-align: center;
		font-family: PingFangSC-regular;
	}
	.sex-item{
		line-height: 40upx;
		border-radius: 4upx;
		margin-right: 40upx;
		width: 80upx;
		text-align: center;
		color: rgba(16, 16, 16, 1);
		font-size: 28upx;
		text-align: center;
		font-family: PingFangSC-regular;
	}
	.popup-msg{
		color: rgba(145, 144, 144, 1);
		font-size: 26upx;
		margin-bottom: 30upx;
		line-height: 30upx;
		text-align: center;
		font-family: PingFangSC-regular;
	}
	.close{
		color: rgba(145, 144, 144, 1);
		height: 50upx;
		top:-160upx;
		font-size: 32upx;
		line-height: 20upx;
		position: relative;
		display: flex;
		flex-direction: row-reverse;
	}
	.ssss{
		width: 100%;
		margin-top: 2px;
		height:calc(50% - 1px);
		padding:0;
		text-align: center;
		color: white;
		font-size: 40upx;
		line-height: 40upx;
		/* for IE */
		filter:alpha(opacity=60);
		/* CSS3 standard */
		opacity:0.6;
	}
</style>
